import React, { memo, useRef } from "react";
import type { ReactNode, ElementRef } from "react";
import { NewAlbumWrapper } from "./style";
import ThemeHeaderRcm from "@/components/theme-header-rcm";
import { Carousel } from "antd";
import { useAppSelector } from "@/store";
import AlbumCover from "@/components/album-cover";
interface IProps {
	children?: ReactNode;
}
const Index: React.FC<IProps> = memo(() => {
	const albumRef = useRef<ElementRef<typeof Carousel>>();

	const { newAlbums } = useAppSelector((state) => ({
		newAlbums: state.recommend.newAlbums,
	}));
	return (
		<NewAlbumWrapper>
			<ThemeHeaderRcm title="新碟上架" showIcon={true} right="更多" />
			<div className="content">
				<div className="inner">
					<Carousel dots={false} ref={albumRef} speed={2000}>
						{[0, 1].map((item) => {
							return (
								<div key={item} className="page">
									{/* item * 5, (item+1) * 5   第一次遍历0  5  第二次遍历 5  10  */}
									{newAlbums &&
										newAlbums.slice(item * 5, (item + 1) * 5).map((cItem) => {
											return (
												<AlbumCover key={cItem.id} info={cItem} size={100} width={118} bgp="-570px">
													{cItem.name}
												</AlbumCover>
											);
										})}
								</div>
							);
						})}
					</Carousel>
				</div>
				<div className="sprite_02 arrow arrow-left" onClick={(e) => albumRef.current.prev()}></div>
				<div className="sprite_02 arrow arrow-right" onClick={(e) => albumRef.current.next()}></div>
			</div>
		</NewAlbumWrapper>
	);
});
export default Index;
